import React, { useState, useEffect, useContext } from "react";
import "../css/details.css";
import { useParams, useNavigate } from "react-router-dom";
import { AppState } from "../App";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart } from "@fortawesome/free-solid-svg-icons";

const Details = () => {
  const navigate = useNavigate();
  const App = useContext(AppState);
  const { id } = useParams();
  const [Data, setData] = useState(null);
  const [Voters, setVoters] = useState([]);

  useEffect(() => {
    if (App.Foundationcontract) {
      const getProposals = async () => {
        try {
          const Proposal = await App.Foundationcontract.requestions(id);
          setData(Proposal);
          const voter = await App.Foundationcontract.getRequestVoters(id);
          setVoters(voter);
        } catch (error) {
          console.log(error);
        }
      };
      getProposals();
    }
  }, [App.Foundationcontract, id]);

  const BackToSongwarm = () => {
    navigate("/header/songwarm?tittle=");
  };

  return (
    <div className="detialMainDiv">
      {Data ? (
        <>
          <div className="topImg">
            <img
              src={`https://blush-chemical-hedgehog-894.mypinata.cloud/ipfs/${Data.photo.split(",")[0]
                }`}
              alt="首张照片"
            />
            <div className="topRImg">
              <FontAwesomeIcon icon={faHeart} className="fa-heart" />
              {Data.votersNumber.toString()}
            </div>
          </div>
          <h1>{Data.description}</h1>
          <h3>{Data.recipient}</h3>
          <div className="donate-btn">
            <button type="button" className="btn">
              立即投票
            </button>
            <button type="button" className="btn" onClick={BackToSongwarm}>
              返回页面
            </button>
          </div>
          <div className="detailDiv">
            <div className="record">
              <div className="donation-info1">
                {Data.moredescription}
              </div>
            </div>
          </div>

          <div className="detailDiv">
            <div className="record">
              <div className="donation-info">
                {Voters.length > 0 ? (
                  <>
                    <h2>已投票名单如下：</h2>
                    <ul className="leaderboard-list">
                      {Voters.map((voter, index) => (
                        <li key={index}>用户---{voter}</li>
                      ))}
                    </ul>
                  </>
                ) : (
                  <p>该项目当前还没有投票者</p>
                )}
              </div>
            </div>
            <div className="image-container">
              {Data.photo.split(",").map((photo, idx) => (
                <img
                  key={idx}
                  src={`https://blush-chemical-hedgehog-894.mypinata.cloud/ipfs/${photo}`}
                  alt={`Proposal Photo ${idx + 1}`}
                />
              ))}
            </div>
          </div>
        </>
      ) : (
        <div className="lodingContent">
          <h1>加载中...</h1>
        </div>
      )}
    </div>
  );
};

export default Details;
